<template>
    <div class="page">
        <div>
            <h3>一级案件审批</h3>

            <el-card class="card-box">
                <div slot="header">
                    <span>审批流程</span>
                </div>
                <el-steps :active="currentStep" finish-status="success" align-center>
                    <el-step v-for="(item, index) in approvalSteps" :key="index" :title="item.title">
                        <template slot="description">
                            <div class="step_desc">
                                <span v-if="item.station">{{ item.station }}</span>
                                <span v-if="item.police">{{ item.police }}</span>
                                <span v-if="item.desc">{{ item.desc }}</span>
                                <span v-if="item.time">{{ item.time }}</span>
                                <span v-if="item.tip" class="tip">{{ item.tip }}</span>
                            </div>
                        </template>
                    </el-step>
                </el-steps>
            </el-card>

            <el-card class="card-box">
                <div slot="header">
                    <span>基本信息</span>
                </div>
                <div class="basic-box">
                    <div class="basic-box-item">
                        <div class="basic-box-item-l">
                            <span>案件编号：</span>
                            <span>{{ caseDetail.case_no }}</span>
                        </div>
                        <div class="basic-box-item-r">
                            <span>案件名称：</span>
                            <span>{{ caseDetail.case_name }}</span>
                        </div>
                    </div>
                    <div class="basic-box-item">
                        <div class="basic-box-item-l">
                            <span>提交民警：</span>
                            <span>{{ caseDetail.commit_police }}</span>
                        </div>
                        <div class="basic-box-item-r">
                            <span>提交时间：</span>
                            <span>{{ caseDetail.commit_time }}</span>
                        </div>
                    </div>
                    <div class="basic-box-item-s">
                        <span>办案民警：</span>
                        <span class="mx" v-for="item in caseDetail.police_handle" :key="item.id">{{ item.no }} {{
                    item.name
                }} {{
                        item.tel
                    }}</span>
                    </div>
                    <div class="basic-box-item">
                        <div class="basic-box-item-l">
                            <span>当日值班：</span>
                            <span>{{ caseDetail.duty_police }}</span>
                        </div>
                        <div class="basic-box-item-r">
                            <span>分配时间：</span>
                            <span>{{ caseDetail.assign_time }}</span>
                        </div>
                    </div>
                    <div class="basic-box-item">
                        <div class="basic-box-item-l">
                            <span>分配民警：</span>
                            <span>{{ caseDetail.sign_police }}</span>
                        </div>
                        <div class="basic-box-item-r">
                            <span>签收时间：</span>
                            <span>{{ caseDetail.sign_time }}</span>
                        </div>
                    </div>
                    <div class="basic-box-item-s">
                        <span>办理时间：</span>
                        <span>{{ caseDetail.check_time }}</span>
                    </div>
                    <div class="basic-box-item-s">
                        <span>简要案情：</span>
                        <span>{{ caseDetail.case_desc }}</span>
                    </div>
                    <div class="basic-box-item-s">
                        <span>受、立案文书：</span>
                        <a class="mx link" v-for="item in caseDetail.case_paper" :key="item.id" :href="item.url"
                            target="_blank">{{
                    item.name }}
                            下载</a>
                    </div>
                </div>
            </el-card>

            <el-card class="card-box">
                <div slot="header">
                    <span>要素信息</span>
                    <!-- <el-button class="btn-right" type="text">基于此案件信息，延伸其它要素信息</el-button> -->
                </div>
                <el-table :data="tableData" border>
                    <el-table-column prop="elem_no" label="序号" align="center" />
                    <el-table-column prop="elem_name" label="姓名" align="center" />
                    <el-table-column prop="elem_id" label="证件号" align="center" />
                    <el-table-column prop="elem_type" label="要素类型" align="center" />
                    <el-table-column prop="elem_val" label="要素值" align="center" />
                </el-table>
            </el-card>

            <el-card class="card-box">
                <div slot="header">
                    <span>线索信息</span>
                </div>
                <div class="basic-box-item-s">
                    <span>线索来源情况：</span>
                    <span>{{ caseDetail.clue_src }}</span>
                </div>
                <div class="basic-box-item-s">
                    <span>线索来源文书：</span>
                    <a class="mx link" v-for="item in caseDetail.clue_paper" :key="item.id" :href="item.url"
                        target="_blank">{{
                    item.name }}
                        下载</a>
                </div>
            </el-card>

            <el-card class="card-box">
                <div slot="header">
                    <span>一级审批操作</span>
                </div>
                <div class="action-item">
                    <div class="action-item-t">
                        <span class="label">意见：</span>
                        <el-button type="primary" size="mini" @click="agree">同意</el-button>
                        <el-button type="danger" size="mini" @click="reject">驳回</el-button>
                    </div>
                    <div class="action-item-b">
                        <span class="label">驳回原因：</span>
                        <el-input type="textarea" :rows="6" placeholder="请输入驳回原因" v-model="rejectReason">
                        </el-input>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentStep: 1,
            approvalSteps: [
                { title: '提交案件', station: '【XXX】派出所', police: '张三,李四', desc: '', time: '2024-03-01 11:30', tip: '', },
                { title: '待审核', station: '【XXX】派出所', police: '王五,赵六', desc: '', time: '2024-03-01 11:30', tip: '缺少XXX资料请补充', },
                { title: '待分配', station: '', police: '', desc: '等待当值人员XXX分配案件,分配结果是XXX', time: '2024-03-01 11:30', tip: '已分配王五处理', },
                { title: '待接收', station: '', police: '二级办案人员', desc: '', time: '2024-03-01 11:30', tip: '缺少XXX资料请补充', },
                { title: '待处理', station: '', police: '二级办案人员', desc: '', time: '2024-03-01 11:30', tip: '', },
                { title: '办理完结', station: '', police: '2024-03-04 12:00', desc: '', time: '', tip: '', }
            ],
            caseDetail: {
                case_no: '20240301',
                case_name: 'XXX案件',
                commit_police: '张三',
                commit_time: '2024-03-01 11:30',
                police_handle: [
                    { id: 1, no: '001', name: '张三', tel: '13888888888' },
                    { id: 2, no: '002', name: '李四', tel: '13888888888' },
                ],
                duty_police: '张三',
                assign_time: '2024-03-01 11:35',
                sign_police: '王五',
                sign_time: '2024-03-01 11:40',
                check_police: '赵六',
                check_time: '2024-03-01 11:50',
                case_desc: 'XXX案件简要案情简要案情简要案情简要案情简要案情简要案情',
                case_paper: [
                    { id: 1, name: '受案文书1', url: 'https://www.w3school.com.cn' },
                    { id: 2, name: '立案文书2', url: 'https://cn.bing.com/' },
                ],
                clue_src: 'XXX线索来源线索来源线索来源线索来源线索来源线索来源线索来源',
                clue_paper: [
                    { id: 1, name: '线索文书1', url: 'https://www.w3school.com.cn' },
                    { id: 2, name: '线索文书2', url: 'https://cn.bing.com/' },
                ],
            },
            tableData: [],
            rejectReason: ''
        };
    },
    mounted() {
        const data = Array.from({ length: 3 }, (v, k) => {
            return {
                elem_no: k + 1,
                elem_name: '张三',
                elem_id: '123456789012345678',
                elem_type: '手机号',
                elem_val: '18900000000'
            }
        })
        this.tableData = [...data]
    },
    methods: {
        agree() { },
        reject() { }
    },
};
</script>

<style lang="scss" scoped>
.step_desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #909399;

    .tip {
        color: #F56C6C;
    }
}

.card-box {
    .btn-right {
        float: right;
    }
}

.basic-box {
    &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-size: 16px;

        &-s {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 16px;

            .mx {
                margin: 0 20px 0 0;

                &.link {
                    color: #409EFF;
                    cursor: pointer;
                }
            }
        }

        &-l,
        &-r {
            display: flex;
            align-items: center;
        }
    }
}

.action-item {

    &-t,
    &-b {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 16px;

        .label {
            flex-shrink: 0;
            width: 100px;
            margin-right: 20px;
        }
    }
}
</style>